<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        :initForm="initForm"
        @handleReset="handleReset"
        uniqueId="mesProdOrderPlanPassRatioTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
      size="60%"
    >
    </ele-form-drawer>
  </div>
</template>

<script>
import {
  operateList,
  searchConfig,
  configformDescDialog,
  configformDescDialog_generate,
  rowConfig,
  sendThis,
} from "./config";

import { getList } from "@/api/report/mesProdOrderPlanPassRatio";
import moment from "moment";
export default {
  name: "mesProdOrderPlanPassRatio",
  mixins: [searchConfig, configformDescDialog],
  data() {
    const self = this;
    return {
      bomVersionList: [],
      initForm: {},
      title: null,
      bomVersionNumberList: [],
      visible: false,
      visible_generate: false, //下发
      generateIds: [], //下发id
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // formDescDialog, //新增修改框
      // searchConfig,
      operateList,
      getList,
      lineList: [], // 线体
      orderBarcodeRuleList: [], // 条码规则
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          prop: "planCode",
          label: $i18n.t("mesProdOrderPlanPassRatio.productOrder"),
          minWidth: 180,
          showOverflowTooltip: true,
          fixed: "left",
        },
        {
          prop: "prodCode",
          label: $i18n.t("mesProdOrderPlanPassRatio.prodCode"),
          minWidth: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "prodName",
          label: $i18n.t("mesProdOrderPlanPassRatio.prodName"),
          minWidth: 200,
          showOverflowTooltip: true,
        },
        {
          prop: "quantity",
          label: $i18n.t("mesProdOrderPlanPassRatio.planQuantity"),
          minWidth: 110,
          showOverflowTooltip: true,
        },
        {
          prop: "actualQuantity",
          label: $i18n.t("mesProdOrderPlanPassRatio.actualQuantity"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "workshopName",
          label: $i18n.t("common.workshopName"),
          width: 150,
        },
        {
          prop: "lineName",
          label: $i18n.t("common.lineName"),
          minWidth: 200,
          showOverflowTooltip: true,
        },
        {
          prop: "planBeginDate",
          label: $i18n.t("mesProdOrderPlanPassRatio.planBeginDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "planEndDate",
          label: $i18n.t("mesProdOrderPlanPassRatio.planEndDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "actualBeginDate",
          label: $i18n.t("mesProdOrderPlanPassRatio.actualBeginDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "actualEndDate",
          label: $i18n.t("mesProdOrderPlanPassRatio.actualEndDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "passRatio",
          label: $i18n.t("mesProdOrderPlanPassRatio.passRatio"),
          minWidth: 130,
          showOverflowTooltip: true,
          fixed: "right",
        },
      ],
    };
  },
  computed: {},
  created() {
    this.initParams();
  },
  mounted() {
    sendThis(this);
  },
  methods: {
    handleReset() {
      this.refresh();
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {
        add: () => {
          this.disableFields(false);
          this.formDataDialog = {
            simulatedType: "1",
            // priority: 1,
          };
          this.visible = true;
        },
        deleteBatch: () => {
          this.$confirm(
            $i18n.t("common.deleteBatch", {
              name: $i18n.t("mesProdOrderPlanPassRatio.name"),
            }),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            const ids = data.rows.map((val) => val.id).join(",");
            this.rowDel(ids);
          });
        },
        exportExcel: () => {
          window.open("http://is.bluewhaleplat.com:8891/visual/用户画像.xlsx");
        },
      };
      fnc[data.handleName]();
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        edit: () => {
          this.disableFields(false);
          this.rowDetail(row.id);
          this.visible = true;
        },
        detail: () => {
          this.disableFields(true);
          this.rowDetail(row.id);
          this.visible = true;
        },
        delete: () => {
          this.$confirm(
            $i18n.t("common.deleteSingle", {
              name: $i18n.t("mesProdOrderPlanPassRatio.name2"),
            }),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.rowDel(row.id);
          });
        },
      };
      fnc[handleName]();
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true;
      api(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || title);
          this.visible = false;
          this.visible_generate = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t("common.editSuccess"), api: rowUpdate, data }
        : { title: $i18n.t("common.addSuccess"), api: rowCreate, data };
      this.doSubmit(params);
    },
    // 下发-弹框提交事件
    generateSubmit(data) {
      if (this.isLoading) return; // 判断状态
      // console.log("this.lineList=", this.lineList);
      const item_line = this.lineList.find(
        (val) => val.code == data.modelingCode
      );
      data.lineName = item_line.modelingName;

      const item = this.orderBarcodeRuleList.find(
        (val) => val.code == data.orderBarcodeRuleCode
      );
      data.orderBarcodeRuleName = item.description;
      data.ids = this.generateIds.split(",");
      const params = {
        title: $i18n.t("mesProdOrderPlanPassRatio.msg6"),
        api: rowGenerate,
        data,
      };
      this.doSubmit(params);
    },
    // 删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag;
      this.formDescDialog.isShowSubmitBtn = !flag;
    },

    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result;
      });
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.initParams();
      this.$refs.eleTable.refresh(isReset);
    },
    initParams() {
      let timer = moment().subtract(0, "days").format("YYYY-MM-DD");
      this.initForm = { searchTimeType: "1", actualEndDate: [timer, timer] };
    },
    // BOM配方版本号
    getBomVersionNumberList() {
      const { prodCode, seriesCode } = this.formDataDialog;
      if (!prodCode) {
        this.bomVersionList = [];
        return;
      }
      const data = {
        materialCode: prodCode,
        serielsCode: seriesCode,
      };
      getBomVersionNumberList(data).then((res) => {
        this.bomVersionList = res.data.result;
        this.$set(this.formDataDialog, "bomVersion", "");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// /deep/.is-checked {
//   margin-right: 0px !important;

//   width: 50px;
//   padding: 3px 5px;
//   display: inline-block;
//   background: rgb(19, 86, 230);
//   color: white;
// }
// /deep/.el-radio__input {
//   display: none;
// }
</style>
